
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for='item in list'>{{item.name}}</li>
    </ul>
    <button @click="modify">修改</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          {
            name: 'zhangsan',
            age: 19
          },
          {
            name: 'lisi',
            age: 22
          }
        ]
      },
      methods: {
        modify: function() {
          this.list[1].name = 'maotai'
        }
      }
    });
    // 点击修改的按钮, 观察界面,有数据响应式的效果吗?
    // 不是说, 通过索引修改数组元素, 没有数据的响应式吗?
    // 
    /**
    如果代码是: 
    this.list[1] = {
      name: 'maotai',
      age: 22
    }
    这种会有数据的响应式吗
    **/
  </script>
</body>
</html>
